<template>
   <el-col :span="24" class="header">
        <el-col :span="8" class="logo"><img src='../asset/images/hand.png'> 
        {{sysName}}
        </el-col>
        <el-col :span="2"><span class="projectname">&nbsp;<span v-bind:class="{none:controlShow===false}">{{project.name}}</span></span></el-col>
        <el-col :span="6" v-bind:class="{none:controlShow===true}">
              <el-menu :default-active="activeIndex"  class="top-menu" mode="horizontal">
              <el-menu-item index="1" @click.native="presentation">项目展示</el-menu-item>
              <el-menu-item index="2" @click.native="gather">信息管理</el-menu-item>
              <el-menu-item index="3" @click.native="ground">土地利用</el-menu-item>
              <el-menu-item index="4" @click.native="app">绩效评价</el-menu-item>
              </el-menu>
        </el-col>
        <el-col :span="4" class="userinfo">
          <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner">
                <i class="fa fa-user-circle-o"></i>&nbsp;&nbsp;{{name}}
              </span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的消息</el-dropdown-item>
              <el-dropdown-item @click.native="passwordButton">修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>

        <el-dialog title="修改密码"  :visible.sync="passwordEditMe" :modal='false'>
        <el-form :model="editPasswordMe" :rules="rulesPassMe">
            <el-form-item label="原密码" prop="oldPassword" :label-width="formLabelWidth">
               <el-input v-model="editPasswordMe.oldPassword" placeholder="请输入原密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
                    <el-input v-model="editPasswordMe.newPassword" placeholder="请输入新密码"  type="password"></el-input>
               </el-form-item>
               <el-form-item label="重复新密码" prop="checknewpass1" :label-width="formLabelWidth">
              <el-input v-model="editPasswordMe.checknewpass1" placeholder="请再次输入新密码" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="">
                     <el-button @click="passwordEditMe = false">取消</el-button>
                    <el-button type="primary" v-if="buttonMePawd"  @click="submitEditPasswordMe">确定</el-button>
                </div>
      </el-dialog>
		</el-col>
     
</template>
<script>
export default {
  props:{
    activeIndex:{
      type:String
    }
  },
  data() {
     var validatePass4 = (rule, value, callback) => {
      if(this.editPasswordMe.oldPassword === ""){
            callback(new Error("请输入原密码"));
          }else {
            callback();
          }
    };
    var validatePass3 = (rule, value, callback) => {
          if (value === "") {
            callback(new Error("请再次输入密码"));
          } else if (value !== this.editPasswordMe.newPassword) {
           callback(new Error("两次输入密码不一致!"));
           this.buttonMePawd = false
            } else {
            this.buttonMePawd = true
            callback();
          }
    };
    return {
      sysName: "山水林田湖草生态修复集成跟踪系统",
      name: "",
      sysUserName: "",
      sysUserAvatar: "",
      listmenu:'北京地铁',
      show:false,
      presentationMenu:false,
      gatherMenu:false,
      appMenu:false,
      groundMenu:false,
      controlShow:false,
      formLabelWidth: "120px",
      passwordEditMe:false,
      buttonMePawd:false,
      project:'',
       // 修改自身密码
      editPasswordMe:{
        oldPassword:'',
        newPassword:'',
        checknewpass1:'',
      },
      rulesPassMe:{
        oldPassword:[
          {required: true, validator: validatePass4, trigger: "blur"}
        ],
        newPassword:[
          {required: true, message:"请输入新密码"}
        ],
        checknewpass1:[
          {required: true, validator: validatePass3, trigger: "blur"}
        ],
      },
    };
    
  },
   mounted() {
     //获取本地保存token
      var token = sessionStorage.getItem("token")
       this.userModel.userToken(token).then(res => {
        if(res.status != 200){
          this.$confirm("登录超时，请重新登录", "提示", {
          type: "warning"
          }).then(() => {
            this.$router.push("/login")
          }).catch(() =>{
            this.$router.push("/login")
          })
        }else{
          this.name = res.data.name
        }
      }).catch(err => {
        this.$router.push("/login")
        console.log(err.message)
      })
  //  this.loginModel.checkInfo('bob',1).then(res => {
  //    console.log(res);
  //  }).catch(err => {
  //    console.log(err.message)
  //  })
  },
  methods:{
    showCont(){
      this.show = !this.show;
      this.controlShow = !this.controlShow;
      this.presentationMenu=true;
      this.gatherMenu=false;
      this.appMenu=false;
      this.groundMenu=false;
      this.$router.push("/photo");
      },
    presentation(){
     this.$router.push("/");
    },
    gather(){
      this.$router.push("/userlist");
    },
    app(){
      this.$router.push("/kuangshan")
    },
    ground(){
      this.$router.push("/tudileixing")
    },
    onSubmit() {
      console.log("submit!");
    },
    passwordButton(){
      this.passwordEditMe=true
    },
    //修改密码
    submitEditPasswordMe(){
       let dataPwd={
          type:1,
          oldPassword: this.editPasswordMe.oldPassword,
          newPassword: this.editPasswordMe.newPassword,
        }
        this.userModel.editPassword(dataPwd).then(res=>{
          if(res.status === 200){
            this.passwordEditMe=false
            this.$message({
                  type: "success",
                  message: res.msg
                });
          }else{
            this.$message({
                  type: "info",
                  message: res.msg
                });
          }
        }).catch(err =>{
          console.log(err.message)
        })
    },
    //退出登录
    logout: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {
        //type: 'warning'
      })
        .then(() => {
          this.loginModel.logout().then(res => {
            _this.$router.push("/login")
          }).catch(err => {
            console.log(err.message)
          })        
          
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.header {
    height: 60px;
    line-height: 60px;
    background-color: #475669;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }

    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #ffffff;
      }
    }
    .logo-width {
      width: 400px;
    }
    .logo-collapse-width {
      width: 60px;
    }
  }
</style>
